import React from 'react'
import PropTypes from 'prop-types'
import { View, Text } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import LinearGradient from 'react-native-linear-gradient'
import {
  operatorTransferMaster,
  auditMasterUnbind,
  auditApplyOperator,
  operatorUnbindOperator,
  getCompanyMemberInfo
} from '@utils/RequestAPI'
import CustomModalAnimatable from '@/components/modal/CustomModalAnimatable'
import { CommonToast } from '@utils/ToastUtil'
import { getUserAvatorLocalB } from 'src/utils/ConfigUtil'
import { styles, modal, empty } from '../css/AdministratorsBody'
import { showModal } from 'src/utils/ModalUtil'
import WhiteWrap from 'src/pageP/home/home-page/components/WhiteWrap'

export default class AdministratorsBody extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    companyClick: PropTypes.func,
    getApplyComeInOperatorList: PropTypes.func,
    jumpVip: PropTypes.func,
    operatorListFn: PropTypes.func,
    companyId: PropTypes.number,
    masterSearchFn: PropTypes.func,
    userId: PropTypes.number,
    comeInOperatorList: PropTypes.any,
    workmatesList: PropTypes.any,
    checkbox: PropTypes.number,
    operatorLis: PropTypes.any,
    transferMaster: PropTypes.bool,
    masterSearch: PropTypes.bool
  }

  constructor (props) {
    super(props)
    this.state = {
      initialPage: 0,
      checkbox: 0,
      visible: false,
      member: false,
      unbindOperatorModal: false,
      modalTitle: '升级至超级会员',
      modalText: '您当前为非会员，仅支持1个公司成员，升级会员可添加更多同事。',
      type: 0,
      user: {},
      upgradeMemberModal: false
    }
  }

  onClick = ({ type, user }) => {
    const { companyId } = this.props
    this.optionModel.close()
    if (type < 3) {
      this.setState({
        type,
        user,
        visible: true
      })
    }
    if (type >= 3) {
      auditApplyOperator({ params: { agree: type === 4, operatorId: user.id } }).then((data) => {
        const { getApplyComeInOperatorList, operatorListFn, companyId } = this.props
        if (data.code === 200) {
          getApplyComeInOperatorList(companyId)
          operatorListFn(companyId)
        } else if (data.code === 101) {
          getCompanyMemberInfo().then((data) => {
            if (data.data.member == true) {
              this.setState({
                member: data.data.member,
                modalTitle: '提示',
                upgradeMemberModal: true,
                modalText: `您当前为${data.data.memberLevel}，仅支持${data.data.operator}个公司成员。`
              })
            } else {
              this.setState({
                upgradeMemberModal: true
              })
            }
          })
        }
      })
    }
  }

  clickThreeDot = ({ type, user }) => {
    // 点击操作审核人员
    this.optionModel = showModal(
      this._threeDotView({ type, user })
    )
  }

  _threeDotView = ({ type, user }) => {
    const { checkbox, masterSearch, transferMaster } = this.props
    switch (checkbox) {
      case 0:
        return (
          <WhiteWrap>
            <View style={styles.modalContainer}>
              <CustomButton onPress={this.unbindOperatorModal} params={{ user }} style={styles.AuditButton}>
                <Text style={styles.AuditButtonText}>解绑</Text>
              </CustomButton>
              <View style={styles.line}></View>
              <CustomButton onPress={this.onClick} params={{ type: 1, user }} style={styles.AuditButton}>
                <Text style={styles.AuditButtonText}>转让</Text>
              </CustomButton>
            </View>
          </WhiteWrap>
        )
      case 1:
        return (<WhiteWrap>
          <View style={styles.modalContainer}>
            <CustomButton style={styles.AuditButton} onPress={this.onClick} params={{ type: 4, user }}>
              <Text style={styles.AuditButtonText}>接受</Text>
            </CustomButton>
            <View style={styles.line}></View>
            <CustomButton style={styles.AuditButton} onPress={this.onClick} params={{ type: 3, user }}>
              <Text style={styles.AuditButtonText}>拒绝</Text>
            </CustomButton>
          </View>
        </WhiteWrap>)
      case 2:
        return (
          <WhiteWrap>
            <View style={styles.modalContainer}>
              <CustomButton onPress={this.onClick} params={{ type: 2, user }} style={styles.AuditButton}>
                <Text style={styles.AuditButtonText}>解绑</Text>
              </CustomButton>
            </View>
          </WhiteWrap>
        )
    }
  }

  onConfirm = () => {
    const { operatorListFn, masterSearchFn, companyId, userId } = this.props
    const { user, type } = this.state
    if (type === 1) {
      operatorTransferMaster({ headers: { userId: userId }, params: { companyId, transferUserId: user.userId + '' } }).then((data) => {
        if (data.data === true) {
          CommonToast(`转给${user.userName}管理员成功`)
          masterSearchFn(companyId)
          operatorListFn(companyId)
        } else {
          CommonToast(`转给${user.userName}管理员失败`)
        }
        this.setState({
          visible: false
        })
      })
    } else {
      auditMasterUnbind({ headers: { userId: userId }, params: { companyId, agree: true, operatorId: user.id } }).then((data) => {
        if (data.data === true) {
          CommonToast(`${user.userName}已被解除`)
          masterSearchFn(companyId)
          operatorListFn(companyId)
        } else {
          CommonToast(`${user.userName}解除失败`)
        }
        this.setState({
          visible: false
        })
      })
    }
  }

  onCancel = () => {
    const { operatorListFn, masterSearchFn, companyId, userId } = this.props
    const { user, type } = this.state
    auditMasterUnbind({ headers: { userId: userId }, params: { companyId, agree: false, operatorId: user.id } }).then((data) => {
      if (data.data === true) {
        CommonToast(`${user.userName}已被拒绝解除`)
        masterSearchFn(companyId)
        operatorListFn(companyId)
      } else {
        CommonToast(`${user.userName}解除失败`)
      }
      this.setState({
        visible: false
      })
    })
  }

  shutModal = (modal) => {
    this.setState({
      upgradeMemberModal: false,
      visible: false,
      unbindOperatorModal: false
    })
  }

  upgradeMember = () => {
    this.shutModal()
    if (this.state.member == false) {
      this.props.jumpVip()
    }
  }

  dlOperator = () => {
    const { operatorListFn, masterSearchFn, companyId, userId } = this.props
    const { user } = this.state
    operatorUnbindOperator({ headers: { userId: userId, companyId }, params: { companyId, agree: false, operatorId: user.id } }).then((data) => {
      if (data.data === true) {
        CommonToast(`${user.userName}已被解除`)
        masterSearchFn(companyId)
        operatorListFn(companyId)
      } else {
        CommonToast(`${user.userName}解除失败`)
      }
      this.shutModal()
    })
  }

  unbindOperatorModal = ({ user }) => {
    this.setState({
      unbindOperatorModal: true,
      user
    })
  }

  render () {
    const { checkbox, comeInOperatorList, workmatesList, transferMaster, operatorLis, masterSearch } = this.props
    const { visible, type, user, upgradeMemberModal, modalText, modalTitle, member, unbindOperatorModal } = this.state
    const list = checkbox === 0 ? workmatesList : checkbox === 2 ? operatorLis : comeInOperatorList
    return (
      <View style={styles.administratorsBody}>
        {
          (list || []).length > 0 ? (list || []).map((item, index) => {
            return (
              <View style={styles.memberItem} key={index}>
                <CustomImage style={styles.memberItemImg} source={item.userAvator ? { uri: item.userAvator } : getUserAvatorLocalB(item.sex, item.id)} />
                <View style={styles.memberItemViewTow}>
                  <View style={styles.itemNameView}>
                    <Text style={styles.itemNameText}>{item.userName}</Text>
                  </View>
                  <View style={[styles.mobilePhone]}>
                    <View style={styles.mobilePhoneView}>
                      <Text style={styles.mobilePhoneViewName}>{item.postion}·{item.mobile}</Text>
                    </View>
                  </View>
                </View>
                {!(checkbox === 0 && item.master === 1) && masterSearch && <CustomButton style={styles.dotContainer} onPress={this.clickThreeDot} params={{ user: item }}>
                  <View style={styles.dotItem}></View>
                  <View style={styles.dotItem}></View>
                  <View style={styles.dotItem}></View>
                </CustomButton>}
                {
                  (checkbox === 0 && item.master === 1) && <LinearGradient
                    colors={['#65D797FF', '#5DC9C5FF']}
                    style={styles.administratorsView}>
                    <Text style={styles.administratorsText}>管理员</Text>
                  </LinearGradient>
                }
              </View>)
          }) : <View style={empty.view}>
            <CustomImage style={empty.viewImg} source={require('@/imgC/company/administrators_empty.png')} />
            <Text style={empty.viewTextone}>暂无同事入驻</Text>
            <Text style={empty.viewTextTow}>快让他们加入吧～</Text>
          </View>
        }
        <CustomModalAnimatable onCancel={this.shutModal} visible={upgradeMemberModal}>
          <View style={styles.updateStateModalView}>
            <Text style={styles.updateStateModalTitle}>{member == false && <CustomImage style={styles.svipImg} source={require('@/imgC/company/svip-icon.png')} />}{modalTitle}</Text>
            <Text style={styles.updateStateModalText}>{modalText}</Text>
            <View style={styles.buttonView}>
              <CustomButton onPress={this.shutModal} style={styles.updateStateModalNoBtn}><Text style={styles.updateStateModalNoBtnText}>取消</Text></CustomButton>
              <CustomButton onPress={this.upgradeMember} style={styles.updateStateModalYesBtn}><Text style={styles.updateStateModalYesBtnText}>{member == false ? '升级' : '确定'}</Text></CustomButton>
            </View>
          </View>
        </CustomModalAnimatable>
        <CustomModalAnimatable
          onCancel={this.shutModal}
          visible={visible}
        >
          <View style={modal.view}>
            <Text style={modal.textOne}>{type === 1 ? '转让管理员提示' : '解绑成员提示'}</Text>
            <Text style={modal.textTow}>{`确定将${type === 1 ? '管理员转给' + user.userName : '解绑' + user.userName}吗？`}</Text>
            <CustomButton onPress={this.onCancel} style={modal.buttonOne}>
              <Text style={modal.buttonOneText}>拒绝</Text>
            </CustomButton>
            <CustomButton onPress={this.onConfirm} style={modal.buttonTow}>
              <Text style={modal.buttonTowText}>同意</Text>
            </CustomButton>
          </View>
        </CustomModalAnimatable>
        <CustomModalAnimatable
          onCancel={this.shutModal}
          visible={unbindOperatorModal}
        >
          <View style={modal.view}>
            <Text style={modal.textOne}>{'解绑成员提示'}</Text>
            <Text style={modal.textTow}>{`确定将${'解绑' + user.userName}吗？`}</Text>
            <CustomButton onPress={this.shutModal} style={modal.buttonOne}>
              <Text style={modal.buttonOneText}>取消</Text>
            </CustomButton>
            <CustomButton onPress={this.dlOperator} style={modal.buttonTow}>
              <Text style={modal.buttonTowText}>同意</Text>
            </CustomButton>
          </View>
        </CustomModalAnimatable>
      </View >
    )
  }
}
